<!--
 * @Author: 橘子
 * @Date: 2022-11-26 09:33:29
 * @Project_description: 用户信息
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <d2-container better-scroll class='page'>
    <el-row :gutter='12'>
      <el-col :span='8'>
        <transition name='el-zoom-in-center'>
          <!--          给个margin-bottom: 100px解决过度动画的时候能看到下面的元素-->
          <usersVue v-show='!isPut' style='margin-bottom: 100px' @update='update' />
        </transition>
        <transition name='el-zoom-in-center'>
          <putUserVue v-show='isPut' @update='update' />
        </transition>
      </el-col>
      <el-col :span='8'>
        <passwordVue />
      </el-col>
      <el-col :span='8'>
        <sysVue />
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
import putUserVue from './components/putUser.vue'
import sysVue from './components/sys.vue'
import usersVue from './components/user.vue'
import passwordVue from './components/password.vue'

export default {
  name: 'userInfo',
  // import引入的组件需要注入到对象中才能使用
  components: {
    usersVue,
    passwordVue,
    sysVue,
    putUserVue,
  },
  data() {
    // 这里存放数据
    return {
      user: {},
      isPut: false,
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.user = this.$db._getUser()
  },
  // 方法集合
  methods: {
    update() {
      this.isPut = !this.isPut
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-card {
  height: 83vh !important;
}
</style>
